<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例7</title>
</head>

<body>
    <div style="display: flex;flex-direction: column;width: 500px;margin: 100px auto;">
        <div>
            <input type="checkbox" id="checkAll">
            <span id="title">全选</span>
        </div>
        <hr>
        <div><input type="checkbox" class="chek">选项1</div>
        <div><input type="checkbox" class="chek">选项2</div>
        <div><input type="checkbox" class="chek">选项3</div>
        <div><input type="checkbox" class="chek">选项4</div>
        <div><input type="checkbox" class="chek">选项5</div>
        <div><input type="checkbox" class="chek">选项6</div>
        <div><input type="checkbox" class="chek">选项7</div>
        <div><input type="checkbox" class="chek">选项8</div>
        <div><input type="checkbox" class="chek">选项9</div>
        <div><input type="checkbox" class="chek">选项10</div>

    </div>

    <script>
        // 179001202 张皓然
        let checkAll = document.querySelector('#checkAll')
        let cs = document.querySelectorAll('.chek')
        let title = document.querySelector('#title')

        // 全选点击事件
        checkAll.onclick = function() {
            cs.forEach(e => {
                e.checked = this.checked
            })
        }

        // 创建监听器
        setInterval(() => {
            // 全选状态
            let chakall = true;
            //改变全选文字
            if (checkAll.checked) {
                title.innerText = '反选'
            } else {
                title.innerText = '全选'
            }

            cs.forEach(e => {
                if (e.checked == false) {

                    //一旦有没选的 将全选设置为false
                    chakall = false
                }
            })

            //改变全选状态
            checkAll.checked = chakall
        }, 200);
    </script>
</body>

</html>